<template>
  <div class="app-container">
    <el-form >
      <!-- <el-row>
        <el-col :span="9">
          <h3>用户信息</h3>
        </el-col>

      </el-row> -->

      <el-row>
        <el-col :span="9">
          <el-form-item label="商品名字">
            <el-input v-model="detailsData.title"  />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <!-- &nbsp; -->
          <div class="" style="width:100%;height:20px;">

          </div>
        </el-col>
        <el-col :span="9">
          <el-form-item label="商品介绍">
            <el-input readyOnly="readyOnly"  v-model="detailsData.introduce" />
          </el-form-item>
        </el-col>
      </el-row>


      <el-row>
        <el-col :span="9">
          <el-form-item label="驳回信息">
            <el-input readyOnly="readyOnly"  v-model="detailsData.reject_msg" />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <!-- &nbsp; -->
          <div class="" style="width:100%;height:20px;">

          </div>
        </el-col>
        <el-col :span="9">
          <el-form-item label="分类">
            <el-input readyOnly="readyOnly"  v-model="detailsData.categoryName" />
          </el-form-item>
        </el-col>
      </el-row>




      <el-row>
        <el-col :span="9">
          <el-form-item label="视频">
            <el-button size="mini" type="primary" @click="showvideo">
              播放
            </el-button>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <!-- &nbsp; -->
          <div class="" style="width:100%;height:20px;">

          </div>
        </el-col>
        <el-col :span="9">
          <el-form-item label="商品图片集">
            <div class="" style="display:flex;width:100%;">
              <img v-for="el in detailsData._img_list" :src="el" alt="" style="width:50px;height:50px;margin-left:10px;" @click="showImg(el)">
              <!-- <el-input readyOnly="readyOnly"  v-model="detailsData.reject_msg" /> -->
            </div>
          </el-form-item>
        </el-col>
      </el-row>


      <el-row v-for="el in detailsData._attribute">
        <el-col :span="9">
          <el-form-item label="自定义属性名">
            <el-input v-model="el._key"  />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <!-- &nbsp; -->
          <div class="" style="width:100%;height:20px;">

          </div>
        </el-col>
        <el-col :span="9">
          <el-form-item label="自定义属性值">
            <el-input readyOnly="readyOnly"  v-model="el._value" />
          </el-form-item>
        </el-col>
      </el-row>









      <el-row>
        <el-col :span="9">
          <el-form-item label="提交时间">
            <span>{{detailsData.ctime|formatDate}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <!-- &nbsp; -->
          <div class="" style="width:100%;height:20px;">

          </div>
        </el-col>

        <el-col :span="9">
          <el-form-item label="更新时间">
            <span>{{detailsData.uptime|formatDate}}</span>
            <!-- <el-input readyOnly="readyOnly"  v-model="" /> -->
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="9">
          <el-form-item label="审核状态">
            <span>{{detailsData.status|statusfn}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <!-- &nbsp; -->
          <div class="" style="width:100%;height:20px;">

          </div>
        </el-col>
        <el-col :span="9">

        </el-col>
      </el-row>

    </el-form>
    <el-dialog :visible.sync="showdialogvideo">
      <video  width="800" height="500" controls>
        <source :src="detailsData.video_url"  type="video/mp4">
      </video>
    </el-dialog>

    <el-dialog :visible.sync="showdialogImg">
      <img :src="urlimg" alt="" >

    </el-dialog>
  </div>
</template>

<script>
const __ = {
  formatDate: (date, fmt) => {
    const padLeftZero = (str) => {
      return ('00' + str).substr(str.length)
    }
    if (/(y+)/.test(fmt)) {
      fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
    }
    const o = {
      'M+': date.getMonth() + 1,
      'd+': date.getDate(),
      'h+': date.getHours(),
      'm+': date.getMinutes(),
      's+': date.getSeconds()
    }
    for (const k in o) {
      if (new RegExp(`(${k})`).test(fmt)) {
        const str = o[k] + ''
        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str))
      }
    }
    return fmt
  }
}
import { getYihuoGoodsById } from '@/api/store'
// import { mapGetters } from 'vuex'
export default {
  name: 'auctiondetails',

  filters: {
    statusfn(n){
      if(n == 2)return '待审核';
      if(n == 1)return '已通过';
      return '驳回';
    },
    formatDate(time) {
      return __.formatDate(new Date(time-0), 'yyyy-MM-dd hh:mm:ss')
    },
  },
  data() {

    return {
      detailsData: {},
      baseimgurl: '',
      showdialogvideo:false,
      showdialogImg:false,
      urlimg: ''
    }


  },
  created() {
    this.getList();
  },
  methods: {
    showImg(urlimg){
      this.urlimg = urlimg;
      this.showdialogImg = true;
    },
    showvideo(data){
      console.log(data)
      this.showdialogvideo = true;
      this.videourlshow = data.video;
    },
    getList(){
      // console.log(this.$roter,'--------',this.$route)
      getYihuoGoodsById({
        id: this.$route.query.id,

      }).then(response => {
        // let list = response.data;
        response['_img_list'] = response['img_list'].split(',');
        this.detailsData = response;
        // // this.catypelist.forEach((el, idx) => {
        // //   let data = response[idx] || {entry_fee: 0, proxy_fee: 0, user_fee:0};
        // //   list.push({category_name: el.name, category_id: el.id, ...data})
        // // })
        // this.list = list;
        // this.total = response.count
        // this.listLoading = false
      })
    }
  }
}
</script>
